<template>
  <view class="code_view">
    <view class="send_code_box" @click="sendCode">
      <template v-if="canSend">
        <text class="text" :class="{ send: true }">{{ isAgainText }}</text>
      </template>
      <template v-else>
        <text class="text no">{{ countdown }}s后重新获取</text>
      </template>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive } from "vue";
// 	1=登录,2=注册,3=找回密码,4=其他
const props = defineProps({
  codeType: {
    type: Number,
    default: 1,
  },
});
// 60秒内不能再次发送验证
const countdown = ref(59);
const canSend = ref(true);
const isAgainText = ref("获取验证码"); // | 重新获取

function sendCode() {
  canSend.value = false;
  let timer = null;

  timer = setInterval(() => {
    countdown.value--;
    if (countdown.value <= 0) {
      canSend.value = true;
      clearInterval(timer);
      isAgainText.value = "重新获取";
    }
  }, 1000);
}
</script>

<style lang="scss" scoped>
.code_view {
  .send_code_box {
    padding: 0px 5px;
    line-height: 1;
  }
  .text {
    font-size: 24rpx;
    line-height: 1;
    &.send {
      color: #40ae36;
    }
    &.no {
      color: #9b9b9b;
    }
  }
}
</style>
